<template>
  <!-- 中间模块监控 -->
  <div class="Body1">
    <div class="title">
      <span class="TItle_left"></span>
      <span v-if="!Type" @click="SeeMore(false)" class="TItle_right_Close"></span>
    </div>
    <div v-if="!Type" class="info_body_more">
      <!-- <div class="box_img" @click="centerDialogVisible = true">
        <div id="Video2"></div>
      </div> -->
      <div @click="OpenDialog(index)" class="box_img" v-for="(item,index) in DATA">
        <div :id="'Video' + index" clas="Video" width="270px" height="270px"></div>
        <span class="name">{{ item.name }}</span>
      </div>

    </div>
    <el-dialog top="5%" :append-to-body="true" :visible.sync="centerDialogVisible" width="82%" center>
      <div id="Video45" class="Video45"width="16.175rem" height="7.5rem"></div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    GetBigScreenUrl
  } from "@/api/BigScreen";

  export default {
    data() {
      return {
        // 播放器对象
        player: [],
        players: "",
        centerDialogVisible: false,
        Type: true,
        tablePage: {
          pageNum: 1, // 第几页
          pageSize: 9, // 每页多少条
          total: 36, // 总记录数
        },
        DATA: [{
            name: "摄像头2",
            url: "../../../assets/Home/Op3component.png",
            key: "2",
          },
          {
            name: "摄像头3",
            url: "../../../assets/Home/Op3component.png",
            key: "3",
          },
          {
            name: "摄像头4",
            url: "../../../assets/Home/Op3component.png",
            key: "4",
          },
          {
            name: "摄像头5",
            url: "../../../assets/Home/Op3component.png",
            key: "5",
          }
        ],
      };
    },
    mounted() {
      this.$bus.$on("SeeMore", (msg) => {
        this.SeeMore(msg);
      });
      this.$bus.$on("ShowVideo", (msg) => {
        this.preUrl = msg;
        this.centerDialogVisible = true;
        this.initPlayer();
      });
    },
    beforeDestroy() {
      this.player = [];
    },
    methods: {
      SeeMore(type) {
        this.$emit("SeeMoreBig", type);
        this.Type = !type;
        let that = this;
        GetBigScreenUrl().then((res) => {
          that.preUrl = res.data.data[0].path;
          that.DATA = res.data.data;
          that.initPlayer();
        });
      },
      handlePageChange() {
        console.log("huanye");
      },
      OpenDialog(index) {
        this.centerDialogVisible = true;
        this.play(this.DATA[index], 45);
      },
      //   初始化播放器
      initPlayer() {
        console.log(this.DATA);
        this.DATA.forEach((item, key) => {
          console.log("Video" + key);
          this.play(item, key);
        });
        this.play(this.DATA[0], 45);
      },
      play(item, key) {
        var paly = new window.JSPlugin({
          // 需要英文字母开头 必填
          szId: "Video" + key,
          // 必填,引用H5player.min.js的js相对路径
          szBasePath: "/h5player/",
          iMaxSplit: 1,
          iCurrentSplit: 1,
        });
        paly.JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            console.log("windowSelect callback: ", iWindIndex);
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(
              `window-${iWindIndex}, errorCode: ${iErrorCode}`,
              oError
            );
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            console.log("鼠标移过回调", iWindIndex);
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            console.log("鼠标移出回调", iWindIndex);
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log("全屏切换回调", bFull);
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log("性能不足回调", iWndIndex);
          },
        });
        let preUrl = item['path'];
        const param = {
          playURL: preUrl,
          // 1：高级模式  0：普通模式，高级模式支持所有
          mode: 0,
        };
        // 当前播放窗口下标
        let index = 0;
        paly.JS_Play(preUrl, param, index).then(
          () => {
            // 播放成功回调
            console.log("播放成功");
          },
          (err) => {
            console.log("播放失败");
            console.info("JS_Play failed:", err);
          }
        );
      }
    },
  };
</script>

<style lang="scss" scoped>

  .Body1 {
    padding: 2.225rem
      /* 18/80 */
      0.275rem
      /* 22/80 */
      0.205rem
      /* 16.4/80 */
      0.275rem
      /* 22/80 */
    ;
    width: 100%;
    height: 100%;

    .page_ {
      position: absolute;
      top: 9.875rem
        /* 790/80 */
      ;
      left: 3.625rem
        /* 290/80 */
      ;
    }

    .info_body {
      margin-top: 0.26875rem
        /* 21.5/80 */
      ;
      width: 100%;
      height: 1.51375rem;
      overflow: hidden;

      .box_img {
        float: left;
        width: 1.98rem;
        margin-left: 0.15rem
          /* 12/80 */
        ;
        height: 1.51375rem
          /* 121.1/80 */
        ;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }

      .name {
        font-size: 13.88px;
        color: white;
      }
    }

    .info_body :first-child {
      margin-left: 0;
    }

    .info_body_more {
      margin-top: 0.26875rem
        /* 21.5/80 */
      ;
      width: 100%;
      height: 8.125rem
        /* 650/80 */
      ;
      overflow: hidden;

      .box_img {
         overflow: hidden;
        float: left;
        width: 3.325rem
          /* 269.2/80 */
        ;
        margin-left: 0.2475rem
          /* 19.8/80 */
        ;
        height: 2.892875rem
          /* 151.43/80 */
        ;
        margin-bottom: 0.8875rem
          /* 71/80 */
        ;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }

      img {
        width: 3.365rem
          /* 269.2/80 */
        ;
        height: 1.892875rem
          /* 151.43/80 */
        ;
      }

      .name {
        font-size: 0.292rem
          /* 23.36/80 */
        ;
        color: white;
        margin-top: 0.0625rem
          /* 5/80 */
        ;
      }
    }

    .info_body_more :nth-child(3n + 1) {
      margin-left: 0;
    }

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .TItle_left {
        color: white;
        font-size: 0.25rem
          /* 20/80 */
        ;
      }

      .TItle_right {
        cursor: pointer;
        font-weight: 500;
        color: rgba(0, 255, 251, 1);
        font-size: 0.175rem
          /* 14/80 */
        ;
      }

      .TItle_right_Close {
        width: 0.2625rem
          /* 21/80 */
        ;
        height: 0.2625rem
          /* 21/80 */
        ;
        background: url(../../../assets/Home/chahao.png);
        cursor: pointer;
      }
    }

    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .el-pager li {
      background: linear-gradient(180deg,
          rgba(39, 170, 255, 1) 0%,
          rgba(13, 37, 68, 1) 100%);
      width: 0.5rem
        /* 40/80 */
        !important;
      height: 0.4625rem
        /* 37/80 */
        !important;
      line-height: 0.4625rem
        /* 37/80 */
      ;
      font-size: 0.175rem
        /* 14/80 */
      ;
      color: white;
    }

    ::v-deep .el-pager li.active {
      background: rgba(0, 194, 212, 1) !important;
    }
  }
</style>
